<template>
    <div class="app">
        <div
            v-loading="mapDataLoading"
            id="mapBox"
            :class="{ready:mapReady}"
            class="main-body-mapbox y_mapbox"

        ></div>

        <div class="allEvents">
            <div class="domTree">
                <div class="treeContent custom-shadow-names">
                    <el-tree class="treeList"
                         :data="videoList"
                         :props="defaultProps"
                         :default-expand-all="false"
                         @node-click="handleNodeClick">
                    </el-tree>
                </div>
            </div>
        </div>
        <!-- @Author: yinchy @CreatDate: 2020/10/27 9:21 @Description: 摄像头详细信息 -->
        <el-dialog
                title="视频监控"
                append-to-body
                :close-on-click-modal="false"
                :modal="false"
                top="6rem"
                width="70%"
                custom-class="el-dragable-dialog default-on-right "
                v-el-drag-dialog
                :visible.sync="showCaseInfoDialog"
        >
            <iframe :src="iFrameSrc" frameborder="0" width="100%" height="650px"></iframe>
        </el-dialog>

        <el-dialog
                title="摄像头信息"
                append-to-body
                :close-on-click-modal="false"
                :modal="false"
                top="6rem"
                width="20%"
                custom-class="el-dragable-dialog default-on-right "
                v-el-drag-dialog
                :visible.sync="showVideoInfo1"
        >
            <div class="video-info">
                <ul>
                    <li>
                        <div class="video-title">名称</div>
                        <div class="video-value">{{videoInfo.title}}</div>
                    </li>
                    <li>
                        <div class="video-title">社区</div>
                        <div class="video-value">{{videoInfo.address}}</div>
                    </li>
                    <li>
                        <div class="video-title">型号</div>
                        <div class="video-value">{{videoInfo.model}}</div>
                    </li>
                    <li>
                        <div class="video-title">方向</div>
                        <div class="video-value">{{videoInfo.camtype}}</div>
                    </li>
                    <li class="chakanshipin" >
                        <div class="chakan" @click="openVideo">
                            查看视频监控
                        </div>
                    </li>
                </ul>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import elDragDialog from "@/directive/el-drag-dialog"; // base on element-ui
    import * as dutyArr from "@/public/sxt.js";
    var map;
    export default {
        name: "",
        directives: { elDragDialog },
        data(){
            return{
                mapReady: false,
                mapDataLoading: false,
                listLoading: false,
                onallshowvideo:false,
                eventsNum: 0,
                videoList: [],
                defaultProps: {
                    children: "children",
                    label: "label"
                },
                markersList: [],
                yellowMarkersList: [],
                caseList: [],
                showCaseInfoDialog: false,
                iFrameSrc: "",
                showVideoInfo1: false,
                videoInfo: {
                    port: 80,
                    pwd: "",
                    rotate: "",
                    id: "",
                    title: "",
                    img: "",
                    wcnumber: "",
                    code: "",
                    type: "",
                    position: "",
                    X: "",
                    Y: "",
                    address: "",
                    camtype: "",
                    contact: "",
                    contacttl: "",
                    gbcode: "",
                    humancode: "admin",
                    model: "",
                    name: "",
                    onebyone: "",
                    gridid: "",
                    qhnumber: "",
                    remark: "",
                    responsibl: "",
                    rptel: "",
                    xlnumber: ""
                }
            }
        },
        created(){
            console.log(dutyArr.duty);
            this.videoList = dutyArr.duty

            console.log(localStorage.getItem("humancode"))
            for (let i=0;i<dutyArr.duty.length;i++){
                let data = dutyArr.duty[i];
                for (let j=0;j<data.children.length;j++){
                    let d = data.children[j];
                    for (let k=0;k<d.children.length;k++){
                        let dd = d.children[k]
                        let oo = this.LonLat2Mercator(dd.x, dd.y);
                        let ooo  = this.Mercator2LonLat(oo.x, oo.y);
                        debugger
                        this.caseList.push(
                                {
                                    id: k+1,
                                    title: dd.label,
                                    img: "",
                                    wcnumber: dd.wcnumber,
                                    code: dd.onebyone,
                                    type: dd.direction,
                                    direction: dd.direction,
                                    rotate: dd.rotate,
                                    position: [ ooo.x, ooo.y],
                                    X: dd.x,
                                    Y: dd.y,
                                    address: dd.address,
                                    camtype: dd.camtype,
                                    contact: dd.CONTACT,
                                    contacttl: "",
                                    gbcode: "",
                                    humancode: localStorage.getItem("humancode"),
                                    model: dd.model,
                                    name: dd.label,
                                    onebyone: dd.onebyone,
                                    gridid: "",
                                    qhnumber: dd.qhnumber,
                                    remark: "",
                                    responsibl: "",
                                    rptel: "",
                                    xlnumber: dd.xlnumber

                                })
                    }
                }
            }
            this.getData()

        },
        mounted(){
            this.$nextTick(()=>{
                this.mapInit()
                this.addPointsListToMap()
            })
        },
        methods: {
            openIE(url){
                debugger
                // window.open("alert:"+url,'addFileWindow','toolbar=no,location=no,resizable=no, height=500, width=680,,scrollbars=yes ,left=380,top=100');
                //window.open   (url,   "newwindow",   "height=500,   width=800,   toolbar=no,   menubar=no,   scrollbars=no,   resizable=no,   location=no,   status=yes,left=250,top=250")
                window.location.href = url
            },
            showvideo(){
                this.onallshowvideo = true;
            },
            onclose_first(){
                this.onallshowvideo = false;
            },
            mapInit() {
                const self = this;
                const AMap = window.AMap;
                map = new AMap.Map("mapBox", {
                    mapStyle: "amap://styles/a5f6e6bd157193151290059146ec5e9b", // 设置地图的显示样式
                    //viewMode: "3D",
                    turboMode: true,
                    defaultCursor: "pointer",
                    showBuildingBlock: true,
                    expandZoomRange: true,
                    zooms: [3, 20],
                    zoom: 14,
                    pitch: 60,
                    center: [116.609515,40.138516],
                    forceVector: true
                });

                let uUrl = this.baseUrl.WgUrl;
                var wms = new AMap.TileLayer.WMS({
                    url: uUrl, // wms服务的url地址
                    blend: false, // 地图级别切换时，不同级别的图片是否进行混合
                    tileSize: 512, // 加载WMS图层服务时，图片的分片大小
                    params: {
                        styles:'default',
                        'LAYERS': '0',
                        VERSION:'1.3.0'
                    } // OGC标准的WMS地图服务的GetMap接口的参数
                });
                wms.setMap(map);
                setTimeout(() => {
                    this.mapReady = true;
                }, 1000);
            },
            //点击左侧面板里的摄像头
            handleNodeClick(data) {
                debugger
                // this.removeMapMarkers();
                if(data.x){

                    this.addYellowMarkerToMap(data);
                }
            },
            removeMapMarkers() {
                map.remove(this.markersList);
            },
            //批量添加点
            addPointsListToMap() {
                this.removeMapMarkers();
                for (var i in this.caseList) {
                    let item = this.caseList[i];
                    this.addMarkerToMap(item, i);
                }
            },
            //在地图上添加标注点
            addMarkerToMap(obj) {
                let self = this;
                let AMap = window.AMap;
                // 点标记显示内容，HTML要素字符串
                let markerContent = `<div class="map-icon-marker" style="width: 10em">
                      <div class="map-icon-marker__icon"><i class="iconfont icon-star"></i></div>
                            <div class="map-icon-marker__label">
                        ${obj.title}
                   </div>
                  </div>`;
                //
                let position = new AMap.LngLat(obj.position[0], obj.position[1]);
                let markerAll;
                debugger
                if(obj.rotate == 0){
                    markerAll = new AMap.Marker({
                        position: position,
                        // 将 html 传给 content
                        // content: markerContent,
                        // 以 icon 的 [center bottom] 为原点
                        icon: 'images/video-nomal.png',
                        title: obj.title,
                        offset: new AMap.Pixel(-16, -32),
                        extData: {
                            // ip: this.baseUrl.spjk + "?ip=" + obj.wcnumber,
                            port: 80,
                            pwd: "SYnfx51583",
                            rotate: obj.rotate,
                            id: obj.id,
                            title: obj.title,
                            img: "",
                            wcnumber: obj.wcnumber,
                            code: obj.onebyone,
                            type: obj.direction,
                            direction: obj.direction,
                            position: [ obj.x, obj.y],
                            X: obj.X,
                            Y: obj.Y,
                            address: obj.address,
                            camtype: obj.camtype,
                            contact: obj.contact,
                            contacttl: obj.contacttl,
                            gbcode: obj.gbcode,
                            humancode: localStorage.getItem("humancode"),
                            model: obj.model,
                            name: obj.label,
                            onebyone: obj.onebyone,
                            gridid: obj.gridid,
                            qhnumber: obj.qhnumber,
                            remark: obj.remark,
                            responsibl: obj.responsibl,
                            rptel: obj.rptel,
                            xlnumber: obj.xlnumber
                        },
                    });
                }else if (obj.rotate == 1){
                    markerAll = new AMap.Marker({
                        position: position,
                        // 将 html 传给 content
                        // content: markerContent,
                        // 以 icon 的 [center bottom] 为原点
                        icon: 'images/video-disabled.png',
                        title: obj.title,
                        offset: new AMap.Pixel(-16, -32),
                        zooms: [16,20],
                        extData: {
                            // ip: this.baseUrl.spjk + "?ip=" + obj.wcnumber,
                            port: 80,
                            pwd: "SYnfx51583",
                            rotate: obj.rotate,
                            id: obj.id,
                            title: obj.title,
                            img: "",
                            wcnumber: obj.wcnumber,
                            code: obj.onebyone,
                            type: obj.direction,
                            direction: obj.direction,
                            position: [ obj.x, obj.y],
                            X: obj.X,
                            Y: obj.Y,
                            address: obj.address,
                            camtype: obj.camtype,
                            contact: obj.contact,
                            contacttl: obj.contacttl,
                            gbcode: obj.gbcode,
                            humancode: localStorage.getItem("humancode"),
                            model: obj.model,
                            name: obj.label,
                            onebyone: obj.onebyone,
                            gridid: obj.gridid,
                            qhnumber: obj.qhnumber,
                            remark: obj.remark,
                            responsibl: obj.responsibl,
                            rptel: obj.rptel,
                            xlnumber: obj.xlnumber
                        },
                    });
                }

                this.markersList.push(markerAll);
                // 将 markers 添加到地图
                map.add(markerAll);
                AMap.event.addListener(markerAll, 'click', function(e) {
                    debugger
                    let data = e.target.Ce.extData;
                    self.videoInfo = data
                    self.showVideoInfo1 = true
                })
                AMap.event.addListener(markerAll, 'mouseover', function(e) {

                })
            },
            /**
             * @Author: yinchy
             * @CreatDate: 2020/10/27 9:24
             * @Description: 打开摄像头
             */
            openVideo(){
                if(navigator.userAgent.indexOf("Chrome") > -1){
                    this.beforeOpenIe(this.videoInfo)
                }else{
                    this.beforeOpen(this.videoInfo)
                }
            },
            //ie自己打开
            beforeOpen(e){
                let sxtObj = e;
                if(e.rotate == 0){
                    // if(e.target.Ce.extData.model.substr(0, 3) == 'IDS' || e.target.Ce.extData.model.substr(0, 2) == 'DS'  ){
                    var url = encodeURI("http://11.43.250.2:7080/hkVideo/cn/videoIndex.html?ip="+ JSON.stringify(sxtObj))
                    // var url = encodeURI("alert:"+"http://localhost:8090/hkVideo/cn/videoIndex.html?ip="+ JSON.stringify(sxtObj))
                    // this.openIE(url)
                    // }
                    this.showCaseInfoDialog = true
                    this.iFrameSrc = url

                //window.open(url, 'newwindow', 'height=768, width=1366, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no');
                }
            },
            //传参调用IE
            beforeOpenIe(e){
                debugger
                let sxtObj = e;
                if(e.rotate == 0){
                    // if(e.target.Ce.extData.model.substr(0, 3) == 'IDS' || e.target.Ce.extData.model.substr(0, 2) == 'DS'  ){
                        var url = encodeURI("alert:"+"http://11.43.250.2:7080/hkVideo/cn/videoIndex.html?ip="+ JSON.stringify(sxtObj))
                    //     var url = encodeURI("alert:"+"http://localhost:8090/hkVideo/cn/videoIndex.html?ip="+ JSON.stringify(sxtObj))
                        this.openIE(url)
                    // }
                }
            },
            //点击树列表摄像头换图标
            addYellowMarkerToMap(obj) {
                debugger
                map.remove(this.yellowMarkersList);
                let self = this;
                let AMap = window.AMap;
                // 点标记显示内容，HTML要素字符串
                let markerContent = `<div class="map-icon-marker" style="width: 10em">
                      <div class="map-icon-marker__icon"><i class="iconfont icon-star"></i></div>
                            <div class="map-icon-marker__label">
                        ${obj.title}
                   </div>
                  </div>`;
                //
                let oo = this.LonLat2Mercator(obj.x, obj.y);
                let ooo  = this.Mercator2LonLat(oo.x, oo.y);
                let position = new AMap.LngLat(ooo.x, ooo.y);
                map.setCenter([ooo.x, ooo.y])
                let yellowMarker;
                if(obj.rotate == 0){
                    yellowMarker = new AMap.Marker({
                        position: position,
                        // 将 html 传给 content
                        // content: markerContent,
                        // 以 icon 的 [center bottom] 为原点
                        icon: 'images/video-active.png',
                        title: obj.label,
                        extData: {
                            // ip: this.baseUrl.spjk + "?ip=" + obj.wcnumber,
                            port: 80,
                            pwd: "SYnfx51583",
                            rotate: obj.rotate,
                            id: obj.id,
                            title: obj.label,
                            img: "",
                            wcnumber: obj.wcnumber,
                            code: obj.onebyone,
                            type: obj.direction,
                            direction: obj.direction,
                            position: [ obj.x, obj.y],
                            X: obj.X,
                            Y: obj.Y,
                            address: obj.address,
                            camtype: obj.camtype,
                            contact: obj.contact,
                            contacttl: obj.contacttl,
                            gbcode: obj.gbcode,
                            humancode: localStorage.getItem("humancode"),
                            model: obj.model,
                            name: obj.label,
                            onebyone: obj.onebyone,
                            gridid: obj.gridid,
                            qhnumber: obj.qhnumber,
                            remark: obj.remark,
                            responsibl: obj.responsibl,
                            rptel: obj.rptel,
                            xlnumber: obj.xlnumber
                        },
                        offset: new AMap.Pixel(-16, -32)
                    });
                }else if (obj.rotate == 1) {
                    yellowMarker = new AMap.Marker({
                        position: position,
                        // 将 html 传给 content
                        // content: markerContent,
                        // 以 icon 的 [center bottom] 为原点
                        icon: 'images/video-disabled.png',
                        title: obj.label,
                        extData: {
                            // ip: this.baseUrl.spjk + "?ip=" + obj.wcnumber,
                            port: 80,
                            pwd: "SYnfx51583",
                            rotate: obj.rotate,
                            id: obj.id,
                            title: obj.label,
                            img: "",
                            wcnumber: obj.wcnumber,
                            code: obj.onebyone,
                            type: obj.direction,
                            direction: obj.direction,
                            position: [ obj.x, obj.y],
                            X: obj.X,
                            Y: obj.Y,
                            address: obj.address,
                            camtype: obj.camtype,
                            contact: obj.contact,
                            contacttl: obj.contacttl,
                            gbcode: obj.gbcode,
                            humancode: localStorage.getItem("humancode"),
                            model: obj.model,
                            name: obj.label,
                            onebyone: obj.onebyone,
                            gridid: obj.gridid,
                            qhnumber: obj.qhnumber,
                            remark: obj.remark,
                            responsibl: obj.responsibl,
                            rptel: obj.rptel,
                            xlnumber: obj.xlnumber
                        },
                        offset: new AMap.Pixel(2, 0),
                        zooms: [16,20]
                    });
                }
                this.yellowMarkersList.push(yellowMarker);
                // 将 markers 添加到地图
                map.add(yellowMarker);
                // AMap.event.addListener(yellowMarker, 'click', function(e) {
                AMap.event.addListener(yellowMarker, 'click', function(e) {
                    /**
                     * @Author: yinchy
                     * @CreatDate: 2020/11/2 19:56
                     * @Description: 修复点击树列表定位后摄像头不能点击的bug
                     */
                    debugger
                    let data = e.target.Ce.extData;
                    self.videoInfo = data
                    self.showVideoInfo1 = true
                })
                AMap.event.addListener(yellowMarker, 'mouseover', function(e) {
                    // self.showVideoInfo = true
                })
            },
            //在地图上添加标注点
            clickaddMarkerToMap(obj) {
                debugger
                let self = this;
                let AMap = window.AMap;
                // 点标记显示内容，HTML要素字符串
                let markerContent = `<div class="map-icon-marker" style="width: 10em">
                      <div class="map-icon-marker__icon"><i class="iconfont icon-star"></i></div>
                            <div class="map-icon-marker__label">
                        ${obj.label}
                   </div>
                  </div>`;
                //
                let position = new AMap.LngLat(obj.x, obj.y);
                let marker = new AMap.Marker({
                    position: position,
                    // 将 html 传给 content
                    content: markerContent,
                    // 以 icon 的 [center bottom] 为原点
                    offset: new AMap.Pixel(2, 0)
                });
                this.markersList.push(marker);
                // 将 markers 添加到地图
                map.add(marker);
                AMap.event.addListener(marker, 'click', function(e) {
                    let data = e.target.Ce.extData;
                    self.videoInfo = data
                    self.showVideoInfo1 = true
                })
            },
            getData(){
                this.$http.get(this.baseUrl.ajtjsl, {
                    params: {

                    }
                }).then((rel)=>{
                    this.eventsNum = rel.data.ZS
                })
            },
            LonLat2Mercator(lon, lat){
                var earthRad = 6378137.0;
                var x = ((lon * Math.PI) / 180) * earthRad + 655.69;
                var y = (lat * Math.PI) / 180;
                y = (earthRad / 2) * Math.log((1.0 + Math.sin(y)) / (1.0 - Math.sin(y))) + 152.69;
                return {x: x,y:y}
            },
            Mercator2LonLat(lon, lat){
                var x = lon/20037508.34*180;
                var mmy = lat/20037508.34*180;
                var y= 180/Math.PI*(2*Math.atan(Math.exp(mmy*Math.PI/180))-Math.PI/2);
                return {x: x,y:y}
            }
        }
    }
</script>

<style scoped lang="less">
    @import "../../css/mixin.less";
    .app{
        width: 100%;
        height: calc(100vh - 4.65rem);
    }
    .y_mapbox{
        width: 100%;
        height: 100%;
    }
    .allEvents{
        position: fixed;
        left: 1rem;
        width: 20vw;
        height: 90%;
        z-index: 111;
        background-image: linear-gradient(to right, rgba(17, 17, 135, 0.9), rgba(17, 17, 135, 0.9), rgba(17, 17, 135, 0.9), rgba(17, 17, 135, 0));
    }
    .allshowvideo_top{
        width: 100%;
        height: 6%;
        display:flex;
        justify-content: space-between;
        -webkit-justify-content:space-between;
        align-items: center;
        background-color: rgba(47, 47, 243, 0.9);
    }
    .onclose{
        color:#ffffff;
        font-weight: lighter;
        margin-right: 15px;
        font-size: 35px;
        cursor: pointer;

    }
    .onclose:hover{
        color: rgba(7, 7, 95, 0.9);
    }
    .allshowvideo_top_font{
        font-size:16px;
        color: #ffffff;
        margin-left: 15px;
    }
    .allTop{
        width: 100%;
        height: 15%;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        align-items: center;
        background: url("../../../public/images/content-box1.png") no-repeat;
        background-size: 100% 100%;
    }
    .allshowvideo{
        width:1300px;
        height: 750px;
        position: fixed;
        z-index: 120;
        left: calc(50% - 650px);
        top:100px;
        // background-color: #ffffff;
    }
    .allshowvideoss{
        width:100%;
        height:94%;
        background-color: rgba(45, 45, 122, 0.5);
    }
    .img{
        width: 64px;
        height: 64px;
        background: url("../../../public/images/allEvents.png");
    }
    .allTitle{
        width: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        font-size: 16px;
        color: #84AEFC;
    }
    .allTitle div{
        display: flex;
        justify-content: center;
        width: 100%;
        padding: .2rem;
    }
    .eventsNum b{
        font-size: 28px;
        padding: 0 10px;
    }
    .domTree{
        width: 100%;
        height: 85%;
        display: flex;
        justify-content: center;
        align-items: center;
        background: url("../../../public/images/largebox-bgv.png") no-repeat;
        background-size: 100% 100%;
    }
    .treeContent{
        width: 90%;
        height: 90%;
        overflow-y: auto;
    }
    .videoBox{
        position: fixed;
        right: 1rem;
        width: 28vw;
        height: 90%;
        z-index: 111;
        background-image: linear-gradient(to left, rgba(17, 17, 135, 0.9), rgba(17, 17, 135, 0.9), rgba(17, 17, 135, 0.9), rgba(17, 17, 135, 0));
    }
    .keyRoads{
        width: 100%;
        /*height: 33%;*/
        //background: url("../../../public/images/zm-box2.png") no-repeat;
        background-size: 100% 100%;
    }
    .keyRoadsTitle{
        position: relative;
        left: 0;
        right: 0;
        width: 100%;
        /*text-align: center;*/
        top: 1.3rem;
        font-size: 1rem;
        color: #84AEFC;
    }
    .videoContent{
        width: 100%;
        height: 60%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        padding-top: 5%;
    }
    .videoContent video{
        width: 45%;
        height: 90%;
        margin: 1rem 1% 0;
    }
    .v-bg{
        width: calc(100% / 3);
        height: 5.9rem;
        background: url("../../../public/images/leftNumBg.png") no-repeat;
        background-size: 100% 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: .5rem 0;
    }
    .v-content-box{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        align-content: center;
        flex-wrap: wrap;
        font-size: 1rem;
    }
    .v-content-box div{
        width: 100%;
        text-align: center;
        color: #84AEFC;
    }
    .el-dragable-dialog{
        position: fixed !important;
        &.el-dialog{
            width: 100%;
            margin-left: -180px;
            left: 50%;
            margin-top: 0;
            top: 4rem;
            .el-dialog__body{
                max-height: calc(100vh - 5rem - 100px);
                overflow-y: auto;
                .nativeScroll()
            }
        }
        &.default-on-right{
            &.el-dialog{
                left: auto;
                right: 30px;
            }
        }
    }


    .custom-shadow-names::-webkit-scrollbar {
        width: 0px;
    }
    .custom-shadow-names::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: rgba(0, 0, 0, 0.2);
    }
    .custom-shadow-names::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 0;
        background: rgba(0, 0, 0, 0.1);
    }

    /* Created by yinchy @2020/10/26 16:12
       Description 摄像头信息框
     */
    li{
        list-style: none;
    }
    .video-info li{
        width: 100%;
        height: 30px;
        display: flex;
    }
    .video-info li .video-title{
        width: 25%;
    }
    .chakanshipin{
        display: flex;
        justify-content: center;
    }
    .chakan:hover{
        cursor: pointer;
        color: #2cf5ff;
    }
</style>
